<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>生活调研问卷</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../../common/css/vant-index.css" />
		<link rel="stylesheet" type="text/css" href="../../common/css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/baseInfo.css" />
		<style>
			.reverse-index {
				width: 5.56rem;
				height: 5.56rem;
				margin: 0.15rem 0.67rem;
			}
			.index-content {
				font-size: 0.31rem;
				text-align: left;
				color: rgba(0, 0, 0, 0.65);
				margin-bottom: 0.16rem;
			}
			.score_table {
				width: 6.86rem;
				height: 3.76rem;
				font-size: 0.32rem;
				border-radius: 0.16rem;
				background-color: #fff;
				margin-bottom: 0.48rem;
			}
			.eva_table {
				width: 6.22rem;
				font-size: 0.32rem;
				border-radius: 0.16rem;
				background-color: #fff;
				margin-bottom: 0.48rem;
				padding: 0.14rem 0.32rem;
			}
			.table_item > li {
				height: 0.94rem;
			}
			.table_item > li:first-child {
				background-color: #01cd9c;
				font-size: 0.3rem;
				color: #fff;
				border-radius: 0.16rem;
			}
			.eva_item > li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 1.3rem;
				border-bottom: 1px solid #d8d8d8;
			}
			.flex {
				margin-top: 0.16rem;
				display: flex;
				align-items: center;
			}
			.first_item {
				line-height: 0.94rem;
			}
			.wrapper {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
			}
			.wrapper-ad {
				width: 5.2rem;
				height: 9.26rem;
			}
			.user {
				position: absolute;
				left: 0.21rem;
				bottom: 1.29rem;
				font-size: 0.25rem;
				color: #0068c4;
			}
			.red {
				color: #cd3901;
			}
			.yellow {
				color: #cd7501;
			}
			.green {
				color: #01cd45;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<van-nav-bar
				title="生活调研问卷"
				left-text="返回"
				left-arrow
				@click-left="onClickLeft"
				@click-right="onClickRight"
			>
				<template #right>
					<van-icon name="wap-home-o" size="18" />
				</template>
			</van-nav-bar>
			<div style="padding: 0.32rem 0.32rem 1.5rem 0.32rem">
				<p class="index-content">您本次的填写结果如下</p>
				<div class="score_table">
					<ul class="table_item">
						<li>
							<van-row class="first_item">
								<van-col style="padding-left: 0.32rem" span="8">类型</van-col>
								<van-col style="padding-left: 0.32rem" span="5">分数</van-col>
								<van-col style="padding-left: 0.32rem" span="11"
									>评判结果</van-col
								>
							</van-row>
						</li>
						<li>
							<van-row class="first_item">
								<van-col style="padding-left: 0.32rem" span="8"
									>生活方式</van-col
								>
								<van-col
									style="padding-left: 0.32rem"
									span="5"
									:class="lifeColor"
									>{{lifeScore}}</van-col
								>
								<van-col
									style="padding-left: 0.32rem"
									span="11"
									:class="lifeColor"
									>{{lifedesc}}</van-col
								>
							</van-row>
						</li>
						<li>
							<van-row class="first_item">
								<van-col style="padding-left: 0.32rem" span="8"
									>身心健康</van-col
								>
								<van-col
									style="padding-left: 0.32rem"
									span="5"
									:class="helthyColor"
									>{{helthyScore}}</van-col
								>
								<van-col
									style="padding-left: 0.32rem"
									span="11"
									:class="helthyColor"
									>{{helthyDesc}}</van-col
								>
							</van-row>
						</li>
						<li>
							<van-row class="first_item">
								<van-col style="padding-left: 0.32rem" span="8"
									>自我健康</van-col
								>
								<van-col
									style="padding-left: 0.32rem"
									span="5"
									:class="selfColor"
									>{{selfScore}}</van-col
								>
								<van-col
									style="padding-left: 0.32rem"
									span="11"
									:class="selfColor"
									>{{selfDesc}}</van-col
								>
							</van-row>
						</li>
					</ul>
				</div>
				<p class="index-content">推荐量表</p>
				<div class="eva_table">
					<ul class="eva_item">
						<li v-for="item in eva" :key="item.dataId" @click="toLink(item)">
							<div class="flex">
								<img
									style="width: 1.31rem; margin-right: 0.28rem"
									:src="item.imgUrl"
								/>
								<p style="font-size: 0.33rem; color: #333333; width: 3.94rem">
									{{item.evaluationName}}
								</p>
								<img
									src="../img/finish.png"
									v-if="item.isFinished"
									style="width: 0.36rem; height: 0.36rem"
								/>
								<img
									src="../img/unfinish.png"
									v-else
									style="width: 0.36rem; height: 0.36rem"
								/>
							</div>
							<img src="../img/arrow.png" style="width: 0.5rem" />
						</li>
					</ul>
				</div>
				<p style="font-size: 0.28rem; color: #01cd9c">结果说明：</p>
				<p style="font-size: 0.28rem; margin-top: 0.16rem">
					<b>生活方式评判标准：</b
					>1-20分生活方式不健康、21-40分生活方式略健康、41-48分生活方式较健康
				</p>
				<p style="font-size: 0.28rem; margin-top: 0.16rem">
					<b>身心健康评判标准：</b
					>1-25分身心不健康、26-50分身心略健康、51-72分身心较健康
				</p>
				<p style="font-size: 0.28rem; margin-top: 0.16rem">
					<b>自我健康评判标准：</b
					>1-16分对自身健康不重视、17-32分对自身健康略重视、33-40分对自身健康较重视
				</p>
				<!-- <van-overlay :show="show" @click="handleClick">
                <div class="wrapper">
                <img class="wrapper-ad" src="../img/1.png">
            </van-overlay> -->
				<div
					class="baseInfo_value"
					@click="handleClick"
					style="left: 0.32rem; width: 6.86rem; border-radius: 0.6rem"
				>
					<span style="color: #f3f3f3">重新填写</span>
				</div>
			</div>
		</div>
	</body>
	<!-- 上线环境用 -->
	<script src="../../base.js"></script>
	<script src="../../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../../common/js/axios.min.js"></script>
	<script src="../../common/js/rem.js"></script>
	<script src="../../common/js/url.min.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
		} from '../../common/js/api/vue3-axios-utils.js'
		const baseInfo = {
			data() {
				return {
					show: false,
					eva: [],
					lifeScore: null,
					helthyScore: null,
					selfScore: null,
					lifeColor: '',
					helthyColor: '',
					selfColor: '',
				}
			},
			computed: {
				lifedesc() {
					if (this.lifeScore < 21) {
						this.lifeColor = 'red'
						return '生活方式不健康'
					} else if (this.lifeScore < 41 && this.lifeScore > 20) {
						this.lifeColor = 'yellow'
						return '生活方式略健康'
					} else {
						this.lifeColor = 'green'
						return '生活方式较健康'
					}
				},
				helthyDesc() {
					if (this.helthyScore < 26) {
						this.helthyColor = 'red'
						return '身心不健康'
					} else if (this.helthyScore < 51 && this.helthyScore > 25) {
						this.helthyColor = 'yellow'
						return '身心略健康'
					} else {
						this.helthyColor = 'green'
						return '身心较健康'
					}
				},
				selfDesc() {
					if (this.selfScore < 17) {
						this.selfColor = 'red'
						return '对自身健康不重视'
					} else if (this.selfScore < 33 && this.selfScore > 16) {
						this.selfColor = 'yellow'
						return '对自身健康略重视'
					} else {
						this.selfColor = 'green'
						return '对自身健康较重视'
					}
				},
			},
			created() {
				this.patientId = url('?id')
				this.getScore()
				this.getEva()
			},
			methods: {
				getScore() {
					getAction(spliceUrl('/questionnaire/status'), {
						patientId: this.patientId,
						type: 'life_way',
					}).then(res => {
						if (res.data.success) {
							const data = res.data.result.data
							this.lifeScore = data[0].score
							this.helthyScore = data[1].score
							this.selfScore = data[2].score
						}
					})
				},
				getEva() {
					postAction(spliceUrl('/evaluation/patient/recommend/list'), {
						patientId: this.patientId,
					}).then(res => {
						res = res.data
						if (res.success) {
							this.eva = res.result.map(v => {
								let url = ''
								let path = ''
								switch (v.evaluationId) {
									case 1:
										url = '../../patient/img/evalution/sdsca1.png'
										path =
											'../../patient/evalution/behavior/sdscaInfo.html?from=weapp&pid=' +
											this.patientId
										break
									case 5:
										url = '../../patient/img/evalution/mmas1-8.png'
										path =
											'../../patient/evalution/behavior/mmas8Info.html?from=weapp&pid=' +
											this.patientId
										break
									case 6:
										url = '../../patient/img/evalution/bmq1.png'
										path =
											'../../patient/evalution/behavior/bmqInfo.html?from=weapp&pid=' +
											this.patientId
										break
									case 11:
										url = '../../patient/img/evalution/diabetes1.png'
										path =
											'../../patient/evalution/disease/diabetesInfo.html?from=weapp&pid=' +
											this.patientId
										break
									case 12:
										url = '../../patient/img/evalution/cardiovascular1.png'
										path =
											'../../patient/evalution/disease/cardiovascularInfo.html?from=weapp&pid=' +
											this.patientId
										break
									case 13:
										url = '../../patient/img/evalution/sas1.png'
										path =
											'../../patient/evalution/psychology/sasInfo.html?from=weapp&pid=' +
											this.patientId
										break
									case 14:
										url = '../../patient/img/evalution/sds1.png'
										path =
											'../../patient/evalution/psychology/sdsInfo.html?from=weapp&pid=' +
											this.patientId
										break
									case 16:
										url = '../../patient/img/evalution/burnout1.png'
										path =
											'../../patient/evalution/psychology/burnoutInfo.html?from=weapp&pid=' +
											this.patientId
										break
									case 18:
										url = '../../patient/img/evalution/psqi1.png'
										path =
											'../../patient/evalution/psychology/psqiInfo.html?from=weapp&pid=' +
											this.patientId
										break
									case 20:
										url = '../../patient/img/evalution/happiness1.png'
										path =
											'../../patient/evalution/psychology/happinessInfo.html?from=weapp&pid=' +
											this.patientId
										break
									case 21:
										url = '../../patient/img/evalution/sport.png'
										path =
											'../../patient/evalution/others/sportInfo.html?from=weapp&pid=' +
											this.patientId
										break
									case 22:
										url = '../../patient/img/evalution/nur.png'
										path =
											'../../patient/evalution/others/nurInfo.html?from=weapp&pid=' +
											this.patientId
										break
									case 23:
										url = '../../patient/img/evalution/happiness1.png'
										path =
											'../../patient/evalution/behavior/sdscaInfo.html?from=weapp&pid=' +
											this.patientId
										break
								}
								return {
									...v,
									imgUrl: url,
									path,
								}
							})
							console.log(this.eva)
						} else {
							this.$toast.fail(res.message)
						}
					})
				},
				toLink(item) {
					// console.log(item.path)
					window.location.href = item.path
				},
				handleClick() {
					window.location.href = './lifeIndex.html'
				},
				onClickLeft() {
					window.location.href = '../index.html'
				},
				onClickRight() {
					window.location.href = '../index.html'
				},
			},
		}

		const app = Vue.createApp(baseInfo)

		app.use(vant)
		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)
		app.use(vant.Popup)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");
		app.mount('#app')
	</script>
</html>
